<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    #my-swiper{
        width: 400px;
        height: 550px;
        margin: 0 auto;
        position: relative;
    }

    #box{
        width: 100%;
        height: 100%;
    }

    img{
        width: 100%;
        height: 100%;
    }

    #box .item{
        display: none;
    }

    #box .item.active{
        display: block;
    }

    #swiper-pagination{
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }

    #swiper-pagination .item{
        width: 15px;
        height: 15px;
        background-color: #fff;
        display: inline-block;
        margin-right: 5px;
    }

    #swiper-pagination .item:last-child{
        margin-right: 0;
    }

    #swiper-pagination .item.active{
        background-color: aqua;
    }
</style>
<body>
    <div id="my-swiper">
        <div id="box">
            <div class="item active">
                <img src="/images/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/4.jpg" alt="">
            </div>
        </div>

        <!-- 如果需要分页器 -->
        <div id="swiper-pagination"></div>
    </div>
</body>
</html>
<script>
    let box = document.getElementById('box');

    let SwiperItem = box.getElementsByClassName('item');

    let SwiperPagination = document.getElementById('swiper-pagination');

    let PaginationItem = SwiperPagination.getElementsByClassName('item');

    // 定义当前显示图片
    let index = 0;

    // 自动轮播
    function AutoPlay()
    {
        if(index > SwiperItem.length - 1)
        {
            index = 0;
        }

        for(let i = 0;i < SwiperItem.length;i++)
        {
            SwiperItem[i].classList.remove('active');
            PaginationItem[i].classList.remove('active');

        }

        SwiperItem[index].classList.add('active');
        PaginationItem[index].classList.add('active');

        index++;
    }

    // 循环定时器
    setInterval(AutoPlay,1000);

    // 生成分页指示器的子元素
    for(let i = 0;i < SwiperItem.length;i++)
    {
        SwiperPagination.innerHTML += `<div class="item ${i == 0 ? 'active' : ''}"></div>`
    }
</script>